<template>
  <div id="box">
    <pull-to :top-load-method="refresh" :bottom-load-method="refresha">
        <div class="big">
          <div v-if="arr===false||arr==''">
            <li class="list_wu">
                <img src="../img/back.png" alt="">
            </li>
          </div>
          <div v-else>
            <div class="box-list" v-for="(item,index) in this.arr" :key="index">
                <img :src="item.avatar_head" class="list_img">
                <span class="list_name">{{item.nickname}}</span>
                <span class="list_wz">撕门条获得</span>
                <span class="list_time">{{item.addtime}}</span>
                <a class="list_btn" :href="'yqlh://nickname='+item.nickname+'&headimg='+item.avatar_head+'&getname='+item.name+'&getimage='+item.avatar_head">发放</a>
                <div class="list_line"></div>
                <span class="prize_name">收奖人：{{item.nickname}}</span>
                <span class="prize_phone">{{item.phone}}</span>
                <span class="prize_address">收货地址：{{item.address}}</span>
            </div>
          </div>
        </div>
      </pull-to>
  </div>
</template>
<script>
import axios from 'axios'
import PullTo from 'vue-pull-to'
export default {
  name: 'example',
  components: {
    PullTo
  },
  data(){
      return{
        page:1,
          arr:{ },
          token:this.GLOBAL.serverSrc
      }
  },
  created(){
        this.getData()
  },
  methods: {
    getData(){
      var url=this.token+'/adv/receiveprize';
      var obj={
        user_id:this.$route.query.userid,
        prize_id:this.$route.query.prizeid,
        status:1
      }
      //alert(obj.user_id)
      //alert(obj.prize_id)
     var thet=this;
      this.$axios.post(url,obj).then(response=>{
          thet.arr=response.data.data
          console.log(thet.arr)
      })
      .catch(function(error) {
          console.log(error);
      });
    },
    refresh(loaded) {
      setTimeout(() => {
      //  this.dataList.reverse();
        loaded('done');
      }, 200);
    },
    refresha(loaded){
      setTimeout(() => {

        this.page++;
        var url=this.token+"/adv/receiveprize?page="+this.page;
        // alert(url);

        var obj={
          user_id:this.$route.query.userid,
          prize_id:this.$route.query.prizeid,
          status:1
        }
        var thet=this;
        this.$axios.post(url,obj).then(response=>{
          response.data.data.forEach((item, index) => {

              thet.arr.push(item)
          })
        })
        .catch(function(error) {
            console.log(error);
        });
        loaded('done');
      }, 200);
    }
  }
}
</script>
<style lang="scss" scoped>
.big:nth-last-of-type(1){
  margin-bottom:1.2rem;
}
img{pointer-events: none;vertical-align: sub; }
#box{
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  overflow-x: hidden;
  overflow-y: scroll;
}

  .box-list{
    width:3.54rem;
    height:1.6rem;
    background: #FFFFFF;
    border-radius: 0.05rem;
    position:relative;
    margin-bottom:0.08rem;
    //margin-top:0.13rem;
    .list_img{
        width:0.51rem;
        height:0.51rem;
        position: absolute;
        top:0.18rem;
        left:0.16rem;
        border-radius:0.05rem;
    }
    .list_name{
      color:#1B1B1B;
      font-size:0.15rem;
      font-weight:bold;
      position: absolute;
      top:0.24rem;
      left:0.76rem;
    }
    .list_wz{
      color:#636363;
      font-size:0.12rem;
      position:absolute;
      top:0.53rem;
      left:0.76rem;
    }
    .list_time{
      color:#939393;
      font-size:0.1rem;
      position: absolute;
      top:0.12rem;
      left:2.42rem;
    }
    .list_btn{
      width:0.59rem;
      height:0.2rem;
      border:0.01rem solid #46DCC3;
      border-radius: 0.1rem;
      position: absolute;
      top:0.5rem;
      left:2.76rem;
      color:#46DCC3;
      font-size:0.12rem;
      text-align: center;
      line-height: 0.2rem;
      text-decoration:none;
    }
    .list_line{
      width:3.3rem;
      height:0.01rem;
      background:#EEEEEE;
      position: absolute;
      top:0.85rem;
      left:0.12rem;
    }
    .prize_name{
      color:#1B1B1B;
      font-size:0.15rem;
      position:absolute;
      top:0.94rem;
      left:0.13rem;
    }
    .prize_phone{
      color:#1B1B1B;
      font-size:0.13rem;
      position:absolute;
      top:0.95rem;
      left:2.56rem;
    }
    .prize_address{
      color:#1B1B1B;
      font-size:0.14rem;
      position:absolute;
      top:1.2rem;
      left:0.13rem;
    }
  }
  .list_wu{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    img{
      width:2rem;
      height:0.9rem;
      margin-top:48%;
    }
  }
</style>
